<template>
  <div class="AccessData">
    <p class="ele-title">
      商户访问统计
    </p>
    <div class="div-show">
      <div>
        <p class="ele-p-1">浏览量(PV)</p>
        <p class="ele-p-2">233</p>
        <p class="ele-p-3">
          日<i class="el-icon-top" /><i class="el-icon-bottom" /> 111.61%
        </p>
      </div>
      <div>
        <p class="ele-p-1">独立用户(UV)</p>
        <p class="ele-p-2">233</p>
        <p class="ele-p-3">
          日<i class="el-icon-top" /><i class="el-icon-bottom" /> 111.61%
        </p>
      </div>
      <div>
        <p class="ele-p-1">访问次数(VV)</p>
        <p class="ele-p-2">233</p>
        <p class="ele-p-3">
          日<i class="el-icon-top" /><i class="el-icon-bottom" /> 111.61%
        </p>
      </div>
      <div>
        <p class="ele-p-1">独立(IP)</p>
        <p class="ele-p-2">233</p>
        <p class="ele-p-3">
          日<i class="el-icon-top" /><i class="el-icon-bottom" /> 111.61%
        </p>
      </div>
    </div>
    <div class="echart-map">
      <el-radio-group v-model="radio1">
        <el-radio-button label="访客统计" />
        <el-radio-button label="浏览量(PV)" />
        <el-radio-button label="独立用户(UV)" />
        <el-radio-button label="访问次数(VV)" />
        <el-radio-button label="独立IP" />
        <el-radio-button label="跳出率" />
        <el-radio-button label="平均在线时长" />
        <el-radio-button label="定时任务补偿" />
      </el-radio-group>
    </div>
    <div class="ele-div-4">
      <h4><span /> 趋势图</h4>
      <div id="echart" ref="echart" style="width:100%;height:300px" />
    </div>
    <div class="talbe-footer">
      <h4><span />详细数据</h4>
      <el-table :data="Bindata">
        <el-table-column
          label="时间"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="浏览量PV"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="独立用户UV"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="访问次数VV"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="独立IP"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="跳出率"
          prop="test"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="平均在线时长"
          prop="test"
          header-align="center"
          align="center"
        />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccessData',
  data() {
    return {
      radio1: '',
      activeName: '访客统计',
      Bindata: [],
      currentPage: 1
    }
  },
  mounted() {
    const div_echarts = this.$refs.echart
    if (div_echarts) {
      const myChart = this.$echarts.init(div_echarts)

      myChart.setOption({
        title: {
          text: '',
          show: false
        },
        show: true,
        tooltip: {},
        legend: {
          bottom: 10,
          data: ['今天', '昨天', '7天前', '30天前']
        },
        xAxis: {
          data: [
            '00:00',
            '02:00',
            '04:00',
            '06:00',
            '08:00',
            '10:00',
            '12:00',
            '14:00',
            '16:00',
            '18:00',
            '20:00',
            '22:00'
          ]
        },
        yAxis: {},
        series: [
          {
            name: '今天',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '昨天',
            type: 'line',
            data: [5, 44, 66, 88, 10, 100]
          },
          {
            name: '7天前',
            type: 'line',
            data: [45, 26, 65, 37, 78, 80]
          },
          {
            name: '30天前',
            type: 'line',
            data: [80, 46, 26, 32, 46, 53]
          }
        ]
      })
    }
  },
  methods: {
    /** 选项卡 */
    handleClick() {},
    handleCurrentChange() {},
    handleSizeChange() {}
  }
}
</script>

<style lang="scss" scoped>
.AccessData {
  padding: 20px;
  .ele-title {
    width: 100%;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    background: #f3f3f3;
    border: 1px solid #e6e6e6;
  }
  .div-show {
    display: flex;
  }
  .div-show > div {
    flex-grow: 1;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    padding: 10px 0px 10px 40px;
    .ele-p-1,
    .ele-p-3 {
      font-size: 13px;
    }
    .ele-p-2 {
      font-weight: bold;
      font-size: 20px;
    }
    .ele-p-3 {
      i:first-child {
        color: red;
        font-weight: bold;
      }
      i:last-child {
        color: yellow;
        font-weight: bold;
      }
    }
  }
  .ele-div-4,
  .talbe-footer {
    h4 {
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        border-left: 4px solid gray;
        margin-right: 10px;
        height: 25px;
      }
    }
  }
  .echart-map {
    margin-top: 20px;
    height: 36px;
    background: #f3f3f3;
    ::v-deep.el-radio-button {
      height: 100%;
    }
  }
  .talbe-footer {
    border-top: 1px solid #e6e6e6;
  }
}
</style>
